<template>
    <div class="group-message">
         <div class="title">
            <van-icon name="arrow-left" />  <h2>聊天信息 ({{userMessage.length}})</h2>
         </div>

         <div class="user">
               <div class="user-item" v-for="i in userMessage" :key="i.username">
                  <div class="log"> <img src="../../assets/image/addressImg/icon1.png" alt=""></div>
                   <p>{{i.username}}</p>
               </div>
                <div class="add"> <van-icon name="plus" /> </div>
                <div class="del"> <van-icon name="minus" /> </div>
                
         </div>

          


           

    </div>
</template>


<script>


  export default {
      data() {
         return {
             userMessage:[
                 { //pic: 'require(@/assets/image/addressImg/icon11.png")',
                  username: '赖泽霞'
                 },
                 { //pic: 'require("@/assets/image/addressImg/icon11.png")',
                  username: '影后'
                 },
                 { //pic: 'require("@/assets/image/addressImg/icon11.png")',
                  username: '方楚迎'
                 },
                 { //pic: 'require("@/assets/image/addressImg/icon11.png")',
                  username: '吕春燕'
                 },

             ]
         }
      }
  }




</script>


<style lang="scss" scoped>
     .group-message {
       color: #fff;
       width: 100vw;
       height: 100vh;
      
       background: var(--theme-background-black);
        .title {
             display: flex;
             align-items: center;
             height: 40px;
             padding: 5px;
             h2 {
                 flex: 1;
                 text-align: center;
             }
        }

        .user {
            height: 200px;
            background: var(--theme-cell-black);
            border-radius: 10px 10px 0 0 ;
            padding: 5px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            .user-item {
                
                width: 60px;
                height: 60px;
                 text-align: center;
                 margin-right: 15px;
                .log {
                    width: 50px;
                    height: 50px;
                    margin: auto;
                     img {
                         width: 100%;
                     }
                }
                 p {
                     margin-top: 5px;
                    font-size: 12px; 
                    }

            }
            .add,
             .del {
                width: 50px;
                 height: 50px;
                 border: 2px dashed rgba(245, 243, 243,.4);
                 border-radius: 10px;
                 text-align: center;
                 line-height: 50px;
                 font-size: 30px;
            }

        }
        
     }
</style>